<template>
    <div class="orders">
        <h1>我的订单({{ totals }})</h1>
        <div class="table">
            <el-table height="500" :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="序号" sortable align="center">
                </el-table-column>
                <!-- <el-table-column prop="name" label="商品图片" width="120">
                </el-table-column> -->
                <!-- <el-table-column prop="province" label="商品名称" width="120">
                </el-table-column> -->
                <el-table-column prop="username" label="下单用户" align="center">
                </el-table-column>
                <el-table-column prop="orderDetails" label="订单详情" align="center">
                    <template slot-scope="scope">
                        <el-button @click="orderDetails(scope.row)" type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="orderCode" label="订单编号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="name" label="收货人" align="center">
                </el-table-column>
                <el-table-column prop="phone" label="收货人电话" width="150" align="center">
                </el-table-column>
                <el-table-column prop="address" label="收货地址" align="center" width="300" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.orderStatus == 0">待发货</span>
                        <span v-if="scope.row.orderStatus == 1">已发货</span>
                        <span v-if="scope.row.orderStatus == 2">已收货</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" v-if="scope.row.orderStatus == 1" type="primary"
                            size="mini" plain>确认收货</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totals">
            </el-pagination>
        </div>
    </div>
</template>
<script>
// import Pagination from '../../components/pagination/index.vue'
export default {
    name: 'Orders',
    components: {
        // Pagination
    },
    mixins: [],
    props: {

    },
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            totals: 0
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.getOrderData()
    },
    methods: {
        getOrderData() {
            const form = {
                currentPage: this.currentPage,
                pageSize: this.pageSize
            }
            this.request.post('/order/selectOrderPage', form).then(res => {
                if (res.code == 20000) {
                    // 订单状态，0-待付款，1-待发货，2-已发货，3-已取消
                    this.tableData = res.data.list
                    this.totals = res.data.totals
                }
            })
        },
        // 确认收货
        handleClick(row) {
            // row.orderStatus = 2
            this.request.put(`/order/orderEdit?id=${row.id}&orderStatus=2`).then(res => {
                if (res.code == 20000) {
                    this.$confirm('是否确认收货?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '已确认收货!'
                        });
                        this.getOrderData()
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消确认收货'
                        });
                    });
                }
            })
        },
        handleSizeChange(currentPageSize) {
            this.pageSize = currentPageSize
            this.getOrderData()
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage
            this.getOrderData()
        },
        // 查看订单详情
        orderDetails(row) {
            this.$router.push({
                path: '/orders_Detail',
                query: {
                    id: row.id
                }
            })
        }
    }
};
</script>
<style lang='less' scoped>
.orders {
    width: 80%;
    margin: 10px auto;

    h1 {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .el-button--primary {
        background-color: #11A983;
        color: white;
    }

    .pagination {
        margin: 10px 0;
    }

    /* 针对整个页面的滚动条 */
    ::-webkit-scrollbar {
        display: none;
        /* 对于Webkit浏览器 */
    }

    /* 针对Table的滚动条 */
    .el-table__body-wrapper::-webkit-scrollbar {
        display: none;
        /* 对于Webkit浏览器 */
    }

    .el-table__body-wrapper {
        -ms-overflow-style: none;
        /* 对于IE和Edge */
        scrollbar-width: none;
        /* 对于Firefox */
    }
}
</style>